<template>
  <preview-form
    ref="generateForm"
    :key="renderKey"
    :page-form-model="{}"
    :form-config="formConfig"
  />
</template>
<script lang="ts" name="FormPreview" setup>
import { ref, watch } from "vue";
import PreviewForm from "@/views/formgen/components/FormDesign/import/PreviewForm.vue";
import { watchThrottled } from "@vueuse/core";

const formConfig = ref({
  title: "",
  description: "",
  fields: [],
  labelPosition: "top",
  formKey: "temp001"
});

const props = defineProps<{
  fields: Array<any>;
  formInfo: any;
}>();

const renderKey = ref(0);

watch(
  () => props.fields,
  newVal => {
    formConfig.value.fields = newVal as any;
  },
  {
    deep: true
  }
);

watchThrottled(
  () => props.formInfo,
  newVal => {
    formConfig.value.title = newVal.title;
    formConfig.value.description = newVal.description;
  },
  {
    throttle: 300,
    deep: true
  }
);
</script>
<style scoped lang="scss"></style>
